<template>
	<view v-if="show" class="content-popup" @click="close">
		<view :animation="animation" class="content-box" @click.stop="click">
			<view class="wish-box">
				<image class="thumb" :src="model.imgs" mode="aspectFill"></image>
				<view class="right-box">
					<view>
						<text class="title line-clamp">{{model.title}}</text>
						<text class="description line-clamp">{{model.description}}</text>
					</view>
					<view class="money">¥{{model.amount | moneyFormatter}}</view>
				</view>
			</view>
			<view class="jkxx-box">
				<text>真实姓名:</text>
				 <input v-model="username" class="input" placeholder="请输入真实姓名~"/>
			</view>
			<view class="jkxx-box">
				<text>联系电话:</text>
				<input v-model="mobile" type="number" class="input" placeholder="请输入联系电话~"/>
			</view>
			<button class="confirm" @click="confirm">我要认领</button>
		</view>
	</view>
</template>

<script>
	import { claim, pay } from '@/api/wish/index'
	export default {
		name: 'PopupWishClaim',
		data(){
			return {
				show: false,
				animation: {},
				model: {},
				username: '',
				mobile: ''
			}
		},
		
		methods:{
			visible(model) {
				this.model = model;
				this.show = true;
				this.animation = uni.createAnimation({
					duration: 300,
					timingFunction: 'linear'
				}).bottom(0).step().export()
			},
			
			click() {},
			
			confirm() {
				if (!this.username) {
					this.$api.msg('真实姓名不能为空');
					return;
				}
				if (!this.mobile) {
					this.$api.msg('联系电话不能为空');
					return;
				}
				if (!uni.$u.test.mobile(this.mobile)) {
					this.$api.msg('请输入正确的手机号码');
					return;
				}
				claim({
					institutionCode: this.model.institutionCode,
					name: this.username,
					phone: this.mobile,
					wishId: this.model.id
				}, response => {
					/* 方便演示 */
					pay(this.model.id, res => {
						uni.showModal({
							title: '提示',
							content: '心愿点亮成功, 等待执行',
							showCancel: false,
							success: () => {
								this.$emit('claimSuccess');
								uni.$emit('claimSuccess');
								this.close();
							}
						})
					})
				})
			},
			
			close() {
				setTimeout(() => {
					this.show = false;
				}, 300)
				this.animation = uni.createAnimation({
					duration: 200,
					timingFunction: 'linear'
				}).bottom(-500).step().export()
			}
		}
	}
</script>

<style lang="scss">
	.content-popup {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9;
	}
	
	.content-box {
		display: flex;
		flex-direction: column;
		position: fixed;
		bottom: -500px;
		width: 100vw;
		padding: 30rpx;
		background-color: #fff;
		box-sizing: border-box;
		z-index: 10;
	}
	
	.wish-box {
		display: flex;
		margin-bottom: 40rpx;
		.thumb {
			width: 210rpx;
			height: 170rpx;
			border-radius: 12rpx;
		}
		.right-box {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 20rpx;
			flex: 1;
			.title {
				font-size: 30rpx;
				font-weight: bold;
				color: #101010;
			}
			.description {
				margin-top: 15rpx;
				font-size: 26rpx;
				color: #999999;
				height: 30rpx;
				line-height: 30rpx;
			}
			.money {
				font-size: 40rpx;
				color: red;
				font-weight: bold;
			}
		}
	}
	
	.jkxx-box {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		text {
			width: 130rpx;
			font-size: 30rpx;
			color: #000000;
			line-height: 75rpx;
			font-weight: bold;
			text-align: right;
			margin-right: 40rpx;
		}
		.input {
			border: 1rpx solid #C1C1C1;
			box-sizing: border-box;
			flex: 1;
			height: 75rpx;
			border-radius: 10rpx;
			padding: 0 25rpx;
			font-size: 26rpx;
			color: #000000;
		}
	}
	
	.confirm {
		margin-top: 40rpx;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-image: linear-gradient(to right, #F49C01, #ED810E);
		color: #fff;
		font-size: 36rpx;
		border-radius: 80rpx;
	}
</style>